<template>
  <el-container class="admin-container">
    <!-- 顶部导航栏 -->
    <el-header class="admin-header">
      <div class="header-content">
        <div class="logo">
          <i class="el-icon-s-platform"></i>
          <span>图书推荐系统</span>
        </div>
        <div class="header-right">
          <el-dropdown trigger="click">
            <div class="user-info">
              <el-avatar :size="36" :src="userAvatar"></el-avatar>
              <span class="user-name">管理员</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-user"></i>个人中心
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <i class="el-icon-switch-button"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边栏菜单 -->
      <el-aside width="220px" class="admin-sidebar">
        <el-menu :default-active="activeIndex" class="el-menu-vertical" background-color="#001529" text-color="#a7b1c2"
          active-text-color="#fff" :collapse-transition="false" @select="handleSelect">

          <el-menu-item index="1" class="menu-item">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>

          <el-menu-item index="2" class="menu-item">
            <i class="el-icon-tickets"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>

          <el-menu-item index="3" class="menu-item">
            <i class="el-icon-goods"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>

          <el-menu-item index="4" class="menu-item">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">留言管理</span>
          </el-menu-item>

          <el-menu-item index="5" class="menu-item">
            <i class="el-icon-data-line"></i>
            <span slot="title">商城统计</span>
          </el-menu-item>

          <el-menu-item index="6" class="menu-item">
            <i class="el-icon-picture"></i>
            <span slot="title">轮播图管理</span>
          </el-menu-item>

          <div class="menu-divider"></div>

          <el-menu-item index="7" class="menu-item logout-item">
            <i class="el-icon-switch-button"></i>
            <span slot="title">退出登录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="admin-main">
        <div class="main-container">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      isCollapse: false
    }
  },
  created() {
    this.setSelectIndex()
  },
  methods: {
    setSelectIndex() {
      switch (this.$route.name) {
        case 'userManage':
          this.activeIndex = '1'
          break
        case 'orderManage':
          this.activeIndex = '2'
          break
        case 'shopManage':
          this.activeIndex = '3'
          break
        case 'msgManage':
          this.activeIndex = '4'
          break
        case 'statistics':
          this.activeIndex = '5'
          break
        case 'carousel':
          this.activeIndex = '6'
          break
        case 'addOrEdit':
          this.activeIndex = '3'
          break
      }
    },
    handleSelect(index) {
      switch (index) {
        case '1':
          this.$router.push('/userManage')
          break
        case '2':
          this.$router.push('/orderManage')
          break
        case '3':
          this.$router.push('/shopManage')
          break
        case '4':
          this.$router.push('/msgManage')
          break
        case '5':
          this.$router.push('/statistics')
          break
        case '6':
          this.$router.push('/carousel')
          break
        case '7':
          this.logout()
          break
      }
    },
    logout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('adminUserInfo')
        this.$router.replace('/login')
        this.$message.success('已安全退出')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.admin-container {
  height: 100vh;
  background-color: #f0f2f5;

  .admin-header {
    height: 60px;
    line-height: 60px;
    background: linear-gradient(90deg, #1a2b56, #2a3f84);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding: 0;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 20px;

      .logo {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #fff;
        cursor: pointer;

        i {
          font-size: 24px;
          margin-right: 10px;
        }

        span {
          font-weight: 600;
          letter-spacing: 1px;
        }
      }

      .header-right {
        .user-info {
          display: flex;
          align-items: center;
          color: #fff;
          cursor: pointer;

          .user-name {
            margin: 0 8px 0 12px;
            font-size: 14px;
          }

          i {
            transition: transform 0.3s;
          }
        }

        .user-info:hover i {
          transform: rotate(180deg);
        }
      }
    }
  }

  .admin-sidebar {
    background-color: #001529;
    transition: width 0.3s;
    height: calc(100vh - 60px);

    .el-menu-vertical {
      border-right: none;

      .menu-item {
        transition: all 0.3s;

        i {
          color: #a7b1c2;
          font-size: 18px;
        }

        &:hover {
          background-color: #1890ff !important;

          i,
          span {
            color: #fff !important;
          }
        }
      }

      .el-menu-item.is-active {
        background-color: #1890ff !important;

        i,
        span {
          color: #fff !important;
        }
      }

      .menu-divider {
        height: 1px;
        background-color: rgba(255, 255, 255, 0.1);
        margin: 10px 0;
      }

      .logout-item {
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        &:hover {
          background-color: #ff4d4f !important;
        }
      }
    }
  }

  .admin-main {
    padding: 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;

    .main-container {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      min-height: calc(100% - 40px);
      padding: 20px;
    }
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .admin-sidebar {
    width: 64px !important;

    .el-menu-item span {
      display: none;
    }
  }
}
</style>